import * as THREE from 'three';

import Stats from 'three/addons/libs/stats.module.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { Line2 } from 'three/examples/jsm/lines/Line2.js'
import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js'
import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js'
import { getRect } from '@/core/tooler';

// import { MeshLine, MeshLineMaterial, MeshLineRaycast } from 'three.meshline';

// import { MeshLine, MeshLineMaterial } from "./line.js"

// initConn();

// import { MeshLine, MeshLineMaterial, MeshLineRaycast } from 'three.meshline';

// import { MeshLine, MeshLineMaterial } from "./line.js"

//虚线动画更新位置
let container, stats: any;
let camera: any, scene: any, renderer: any;
let running = true;
export function init(canvas: any) {
    running = true;
    
    container = document.body;
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 20000);
    camera.position.z = 20;

    const controls = new OrbitControls(camera, canvas);
    controls.minDistance = 1;
    controls.maxDistance = 1000;

    renderer = new THREE.WebGLRenderer({ antialias: true, canvas });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);

    stats = new Stats();
    container.appendChild(stats.dom);

    scene = new THREE.Scene();

    let light = new THREE.DirectionalLight(0xffffff, 0.8);
    light.position.set(200, 200, 100);
    scene.add(light)
    // scene.add(new THREE.DirectionalLightHelper(light))

    light = new THREE.DirectionalLight(0x009988, 0.8);
    light.position.set(200, 400, -100);
    scene.add(light)
    // scene.add(new THREE.DirectionalLightHelper(light))

    const hemiLight = new THREE.HemisphereLight(0xff00ff, 0xffffff, 2);
    hemiLight.color.setHSL(0.6, 1, 0.6);
    hemiLight.groundColor.setHSL(0.095, 1, 0.75);
    hemiLight.position.set(0, 100, 0);
    scene.add(hemiLight);

    addView();

    animate();
}

function addView() {
    const polygon2D: any[] = [];

    let str = localStorage.getItem("pots") || "[]";
    let pots: any[] = JSON.parse(str);
    let rect = getRect(pots);
    let cx = (rect.left + rect.right) / 2;
    let cy = (rect.top + rect.bottom) / 2;
    pots.forEach(i => {
        polygon2D.push(new THREE.Vector2(i.x - cx, (i.y - cy) * -1));
    })

    // 拉伸高度
    const height = 0.1;

    // 创建一个拉伸几何体
    const extrudeSettings = {
        steps: 1,
        depth: height,
        bevelEnabled: false
    };

    const shape = new THREE.Shape(polygon2D);
    const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
    // 计算法线
    // geometry.computeFaceNormals();
    // geometry.computeVertexNormals();
    const textureFront = new THREE.TextureLoader().load('./asset/img/t1.png');
    textureFront.repeat.set(1, rect.width / rect.height);
    textureFront.offset.x = 0.5;
    textureFront.offset.y = 0.5;
    textureFront.wrapS = THREE.RepeatWrapping;
    textureFront.wrapT = THREE.RepeatWrapping;
    const material = new THREE.MeshStandardMaterial({ color: 0xffffff, map: textureFront, transparent: true, side: THREE.FrontSide });
    const material2 = new THREE.MeshStandardMaterial({ color: 0x884400, side: THREE.DoubleSide });
    // const material = new THREE.MeshNormalMaterial({});
    const mesh = new THREE.Mesh(geometry, [material, material2]);
    scene.add(mesh);

    // const faceNormalsHelper = new THREE.FaceNormalsHelper(mesh, 0.5, 0x00ff00);

    // scene.add(faceNormalsHelper);
}

function animate() {
    if (running == false) {
        console.log(stats, "over")
        return;
    }
    requestAnimationFrame(animate);
    stats.update();
    render();
}

export function destory() {
    running = false;
    stats.end()
    document.body.removeChild(stats.dom);
}

function render() {
    renderer.render(scene, camera);
}